<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>

    <script>

        // 发布订阅模式  --- 观察者模式

        // 以前
        //   想买包子 ， 包子铺 包子卖完了
        //   过会儿又去问   没有
        //   。。。

        // 消耗通讯时间


        // 现在
        //   想买包子 ， 包子铺 包子卖完了
        //   留下联系方式  
        //   有了包子以后  就通知你

        // 包子铺的老板
        //    来 订包子的人   都收集起来

        // [
        //     {
        //         user : 'yy' , 
        //         type : '牛肉包'
        //         fn : '要牛肉包'
        //     } ,
        //     {
        //         user : 'cc' , 
        //         type : '青菜包'
        //     } ,
        // ]



        // [
        //     {
        //         user : 'yy' , 
        //         info : [
        //                 {
        //                     type : '牛肉包' ,
        //                     fn
        //                 },
        //                 {
        //                     type : '粉丝包' ,
        //                     fn
        //                 }
        //             ]
        //     } ,
            
        // ]


        // 订阅的时候
        //    1 是否已经存在这个用户
        //        没有就创建一个
        //        如果有这个用户
        //            有没有订过 牛肉包  
        //                已经订了  什么都不用干
        //                如果没定订过   新增一条记录



        class BaoZiShop {
            constructor(name) {
                // 店铺的名字
                this.name = name ;
                // 需要一个通讯录
                this.msg = [] ;
            }

            // 订阅   谁需要买什么样的包子  
            add(user , type , fn) {  
                const obj = {user , type , fn} ;
                this.msg.push(obj) ;
            }

            // 发布  --- 有了包子之后要通知出去
            trigger(type) {   // 触发
                // 过滤数据   找到要菜包子的
                const res = this.msg.filter(item => item.type === type) ;
                // 调用fn这个函数
                res.forEach(item => {
                    item.fn()
                })
            }

            // 取消
            remove(user) {
                this.msg = this.msg.filter(item => item.user !== user) 
            }

            // 获取所有的订阅
            getMsg() {
                return this.msg
            }
        }

        const baoXianSen = new BaoZiShop('baoXianSen') ;

        baoXianSen.add('yy' , '牛肉包' , function() {
            console.log('yy要10个牛肉包');
        })

        baoXianSen.add('yy' , '粉丝包' , function() {
            console.log('yy要10个粉丝包');
        })

        baoXianSen.add('cc' , '粉丝包' , function() {
            console.log('cc要2个粉丝包');
        })

        baoXianSen.add('aa' , '粉丝包' , function() {
            console.log('aa要3个粉丝包');
        })

        // baoXianSen.remove('yy') ;


        // 粉丝包子做好了
        baoXianSen.trigger('粉丝包') ;


        console.log(baoXianSen.getMsg());




        // ele.addEventListener('click' , fn1)
        // ele.addEventListener('click' , fn2)
        // ele.addEventListener('click' , fn3)
        // ele.addEventListener('mouseover' , fn1)

    </script>
    
</body>
</html>